{% extends 'base.html' %}

{% block content %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

    <h1 class="display-3">Ricar.Do - Голосование</h1>
    <div class="container">

        <h3>Просто создайте голосование</h3>
        <p><font color="#5cb85c">Благодаря сайту Ricar.do вы можете проводить опросы и собирать полученные данные
            совершенно бесплатно.</font></p>
        <a href="/create/" class="btn btn-success" role="button" aria-pressed="true">Создать голосование</a>
        <br>
        <br>
        </p>
        <h3>Открытые голосования:</h3>
        <!--<div class="container d-flex"> -->


        <div class="row row-cols-1">
        {% for voting in votings %}

            <div class="card m-2 flex-fill" style="width: 500px; min-width: 450px">
                <div class="card-body bg-d">
                    <a href="/vote/{{ voting.id }}" class="h5 card-title">{{ voting.question }}</a>

                    <h6 class="card-subtitle mb-2 text-muted">{{ voting.author }}</h6>
                    <form action="" method="POST">
                        <table width="100%">
                            <tr>
                                <td>
                                    {% for option in voting.options %}
                                        <div class="form-check">
                                            {% if voting.isCheckbox %}
                                                <input class="form-check-input" type="checkbox" name="answer"
                                                       value="{{ option.id }}">
                                            {% else %}
                                                <input class="form-check-input" type="radio" name="answer"
                                                       value="{{ option.id }}">
                                            {% endif %}
                                            <label id="{{ option.id }}_text" class="form-check-label"
                                                   for="exampleRadios1">
                                                {{ option.text }}
                                            </label>
                                            <p style="white-space: nowrap" id="{{ option.id }}_votes">
                                                Классов: {{ option.vote_count }}</p>
                                        </div>

                                    {% endfor %}
                                </td>
                                <td width="50%">
                                    <canvas id="myChart{{ voting.id }}" style="max-width: 400px; max-height: 200px"></canvas>
                                </td>
                                {% csrf_token %}
                            </tr>
                        </table>
                        <div class="row">

                            <input class="btn btn-primary" type="submit" name="vote_button"
                                   value="Голосовать">

                            {% if voting.author == user %}

                                <a class="btn btn-primary" href="/edit/{{ voting.id }}" class="btn"
                                   name="vote_button">Редактировать</a>

                               
                            {% endif %}


                        </div>

                        <input type="hidden" value="{{ voting.id }}" name="voting_id">
                        <!--<input class="btn btn-info" type="button" onclick="drawnewchart();" value="нарисовать график">-->

                        <!--<input class="btn btn-info" type="button" value="Изменить"> -->
                        <!-- TODO: ГРАФИК ДОЛЖЕН ПОЯВЛЯТЬСЯ ПОСЛЕ ГОЛОСОВАНИЯ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
                    </form>
                </div>
            </div>
        {% endfor %}
        </div>
    </div>
    <!--</div>-->
    <!--<input type="hidden" id="len" value="{{len}}"> -->
    <script>

        let indexes = {{ indexes }};

        indexes.forEach(function (i, item, arr) {

            var ls = [{% for item in la %} {{item}}, {% endfor %}];
            var ds = [{% for item in da %} {{item}}, {% endfor %}];
            var mylabels = ls[item];
            var mydata = ds[item];
            console.log('myChart' + (i).toString());
            var ctx = document.getElementById('myChart' + (i).toString()).getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'pie',

                // The data for our dataset
                data: {
                    labels: mylabels,
                    datasets: [{
                        label: 'My First dataset',
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        data: mydata
                    }]
                },

                // Configuration options go here
                options: {
                {% if theme_flag %}
                    legend: {
                        display: false,
                        labels: {
                            fontColor: 'white'
                        }
                    }
                {% endif %}
                }
            });
        });
    </script>

{% endblock %}


<!--
 Для начала: <a href="/register/" class="btn btn-info" role="button" aria-pressed="true">Регистрация</a> или
 <a href="/login/" class="btn btn-info" role="button" aria-pressed="true">Вход</a> -->

